<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<meta content="email=no" name="format-detection" />
		<title>地图选取经纬度</title>

		<link rel="stylesheet" href="../../css/s_plus.css" />
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/layout.css" />
		<link rel="stylesheet" href="../../css/choice.css" />
		<!--<link rel="stylesheet" href="../../css/hui.css" />-->

		<script type="text/javascript" src="../../libs/vue.js"></script>
		<script type="text/javascript" src="../../js/jquery.1.9.1.min.js"></script>
		<script type="text/javascript" src="../../js/app/url.js"></script>
		<script type="text/javascript" src="../../libs/hui.js"></script>
				<script type="text/javascript" src="../../js/mui.min.js"></script>

		<script type="text/javascript" src="../../js/s_plus.js"></script>
		<script type="text/javascript" src="../../js/md5.js"></script>
		<script type="text/javascript" src="../../js/app/api.js"></script>
		<!--<script type="text/javascript" src="../../js/control/mescroll/mescroll.min.js"></script>-->
		<!--<link rel="stylesheet" href="../../js/control/mescroll/mescroll.min.css" />-->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=a82yNQICnHARgGpKuPH1wWZWQcBD2Llo"></script>
		<!--<script type="text/javascript" src="../work/menu.js"></script>-->

		<style>
			/*隐藏百度地图 底部LOGO*/
			
			.BMap_cpyCtrl {
				display: none;
			}
			
			.anchorBL {
				display: none;
			}
		</style>
	</head>

	<body>
		<section id="wrapper" class="wrapper">
			<section class="pusher">
				<section class="sidenav sidebtn">
					<!--侧边栏-->

				</section>
				<section class="mainbody">
						<header class="f_l maxbox subhead">
  <a class="back"  @click="back"><i class="iconfont">&#xe605;</i></a>
  <!--<input type="hidden" value="{{sensor.NUMBER}}" />-->
  <h1>地图选点 </h1>
</header>
					<section class="f_l maxbox map">
			

						<div id="allmap" style="width: 100%;"></div>

					</section>
					<section class="f_l maxbox work_list" style="display: none;">
						<dl>
							<a @click="go(zd)">
								<dt>
              <!--<i class="iconfont bg_red">&#xe60f;</i>-->
              <b>终端详情</b>
            </dt>
								<dd class="txt_list">
									<p><em>设备类型：</em>{{zd.GJ_TYPE}}</p>
									<p><em>设备编号：</em>{{zd.TERMIMAL_CODE}}</p>
									<p><em>设备地址：</em>{{zd.BELONG_STREET}}</p>
								</dd>
							</a>
						</dl>
					</section>
				</section>
			</section>
		</section>

		<script>
				//动态插入公用菜单JS



mui.init({
beforeback: function() {
　　 //获得父页面的webview
var list = plus.webview.currentWebview().opener();
　　 //触发父页面的自定义事件(refresh),从而进行刷新
mui.fire(list, 'refresh');
//返回true,继续页面关闭逻辑
return true;
}
});
			
			var head = $(".header").height();
			var foot = $(".work_list").height();
			var pageHeight = $(document).height();
			var mapHeight = pageHeight - (head);
			$("#allmap").height(mapHeight);
			console.log("head-" + head + "  foot--" + foot + "  pageHeight-" + pageHeight);

			var sp = new Vue({
				el: "#wrapper",
				data: {
					zd: {}
				},
				methods: {
					back:function(){
//						hui.back();
						mui.back();
					}
				

				}
			});
		</script>

		<script type="text/javascript">
			// 百度地图API功能
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(112.9453203518,28.2340227593);
			map.centerAndZoom(point, 14);
			map.enableScrollWheelZoom(false);
			
				
//			map.addEventListener("touchstart",function(e){
//		console.log(e.point.lng + "," + e.point.lat);
//		
//			var cell = {lng:e.point.lng , lat:e.point.lat};
//			deletePoint();
//			
//			localStorage.setItem("p_lng",e.point.lng);
//						localStorage.setItem("p_lat",e.point.lat);
//						
//						console.log(localStorage.getItem("p_lng"));
//						console.log(localStorage.getItem("p_lat"));
//
//
//							addMarker(cell);
//	});
	
	 var xArr = [];//存放横坐标
    var yArr = [];//存放纵坐标
    map.addEventListener("touchstart", function(e){ 
        //手指触摸屏幕的时候清空两个数组
        xArr.length = 0;
        yArr.length = 0;
    }); 

    map.addEventListener("touchmove",function(e){//手指滑动时
        //如果滑动了屏幕，xArr和yArr将各存入两个坐标值，即始末坐标值
        xArr.push(e.targetTouches[0].pageX);
        yArr.push(e.targetTouches[0].pageY);
    });

    map.addEventListener('touchend',function(e){
        var far;
        var flag = true;
        //计算平移距离，区分滑动事件和点击事件
        if((xArr.length > 1) && (yArr.length > 1)){
            far = (Math.abs(xArr[0]-xArr[1]))^2 + (Math.abs(yArr[0]-yArr[1]))^2;
            if(far > 0){
                flag = false;
            }
        }
        if(flag){
            //获取经纬度
            var pt = e.point;
            //创建一个标注，经纬度是当前点击位置
            var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
            //将新的标注添加到地图上时先清空其他的标注
            map.clearOverlays();
            //将标注添加到地图上
            
            var cell = {lng:pt.lng , lat:pt.lat};
            addMarker(cell);
//          map.addOverlay(marker);
        }
    });
	


function deletePoint(){
        var allOverlay = map.getOverlays();
        for (var i = 0; i < allOverlay.length -1; i++){
//            if(allOverlay[i].getLabel().content == "我是id=1"){
                map.removeOverlay(allOverlay[i]);
//                return false;
//            }
        }
    }


			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				console.log(r.point)
				if(this.getStatus() == BMAP_STATUS_SUCCESS) {


					//			var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
					var myIcon = new BMap.Icon("../../images/danger01.png", new BMap.Size(300, 157));
					var mk = new BMap.Marker(r.point, {
						icon: myIcon
					});
					mk.addEventListener("click", attribute);

					function attribute() {
						var p = mk.getPosition(); //获取marker的位置
						console.log("marker的位置是" + p.lng + "," + p.lat);


							var cell = {lng:p.lng, lat:p.lat};
							addMarker(cell);
					}

					//					map.addOverlay(mk); //标出所在地
					//					map.panTo(r.point); //地图中心移动

					var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
					var gc = new BMap.Geocoder();
					gc.getLocation(point, function(rs) {
						var addComp = rs.addressComponents;

						console.log(rs.address); //地址信息
						//alert(rs.address);//弹出所在地址

					});
				} else {
					alert('定位失败，请检查您的手机定位功能是否打开' + this.getStatus());
				}
			}, {
				enableHighAccuracy: true
			})

			//标记
			function addMarker(cell) {
				var point = new BMap.Point(cell.lng, cell.lat);
				var myIcon = new BMap.Icon("../../images/danger01.png", new BMap.Size(22, 30));
				var mk = new BMap.Marker(point, {
					icon: myIcon
				});
				var text=  "经纬度:"  +cell.lng+","+cell.lat;
								var label = new BMap.Label(text,{offset:new BMap.Size(20,-10)});
									mk.setLabel(label);

				mk.addEventListener("click", attribute);
				map.addOverlay(mk); //标出所在地

				if(cell.over) {
					map.panTo(point); //地图中心移动

				}

				function attribute() {
					
//					hui.toast("当前选择经纬度为: " + cell.lng+","+cell.lat);


				}

			}
		
		
		

		</script>
	</body>

</html>
<!--侧边栏向左移动效果*该放在head无效-->
<script src="../../js/modernizr.custom.js"></script>
<script src="../../js/classie.js"></script>
<script src="../../js/sidebarEffects.js"></script>